<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title><@spring.message "module.common.html.title"/></title>
    <link rel="shortcut icon" href="/image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/common.css"/>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="/js/common.webrtc.js" async></script>
    <script type="text/javascript" src="/js/session.webrtc.js" async></script>
    <script type="text/javascript" src="/js/cim/message.js"></script>
    <script type="text/javascript" src="/js/cim/replybody.js"></script>
    <script type="text/javascript" src="/js/cim/sentbody.js"></script>
    <script type="text/javascript" src="/js/cim/cim.web.sdk.js"></script>
    <script type="text/javascript">

        /**  当socket连接成功回调 **/
        function onConnectFinished() {
            CIMPushManager.bind('admin');
        }

        /** 当收到请求回复时候回调  **/
        function onReplyReceived(reply) {
            console.log(reply);
            /**
             * admin绑定成功
             */
            if (reply.key === KEY_CLIENT_BIND && reply.code === CODE_OK) {

            }
            /**
             * 链接鉴权失败
             */
            if (reply.key === KEY_HANDSHAKE && reply.code === CODE_UNAUTHORIZED) {
                hideProcess();
                showETip("鉴权失败");
            }
        }

        function showMessageDialog(account) {
            $('#messageDialog').modal('show');
            $('#Saccount').val(account);
        }

        function doSendMessage() {
            var message = $('#message').val();
            var account = $('#Saccount').val();
            if ($.trim(message) === '') {
                return;
            }
            showProcess("<@spring.message 'module.console.cimsession.sending'/>");
            $.post("/api/message/send", {content: message, action: 2, sender: 'admin', receiver: account, format: '0'},
                function (data) {
                    hideProcess();
                    showSTip("<@spring.message 'module.console.cimsession.send.success'/>");
                    doHideDialog("messageDialog");
                });
        }
    </script>
</head>
<body class="web-app ui-selectable">

<#include "/console/header.html">
    <#include "/console/nav.html">

        <div id="mainWrapper">

            <div class="lay-main-toolbar"></div>
            <div>
                <form action="/console/session/list.action" method="post" id="searchForm">
                    <input type="hidden" name="currentPage" id="currentPage" value="0"/>
                    <table style="width: 100%" class="utable">
                        <thead>
                        <tr class="tableHeader">
                            <th width="8%"><@spring.message 'module.console.cimsession.account'/></th>
                            <th width="8%"><@spring.message 'module.console.cimsession.nid'/></th>
                            <th width="8%"><@spring.message 'module.console.cimsession.channel'/></th>
                            <th width="15%"><@spring.message 'module.console.cimsession.deviceid'/></th>
                            <th width="8%"><@spring.message 'module.console.cimsession.device.name'/></th>
                            <th width="8%"><@spring.message 'module.console.cimsession.app.version'/></th>
                            <th width="8%"><@spring.message 'module.console.cimsession.os.version'/></th>
                            <th width="10%"><@spring.message 'module.common.language'/></th>
                            <th width="10%"><@spring.message 'module.console.cimsession.online.time'/></th>
                            <th width="17%"><@spring.message 'module.common.operation'/></th>
                        </tr>
                        </thead>
                        <tbody>
                        <#list sessionList as cimsession>
                            <tr style="height: 50px;">
                                <td>${cimsession.uid! }</td>
                                <td>
                                    <#if cimsession.nid??>${cimsession.nid}</#if>
                                </td>
                                <td>${cimsession.channel! }</td>
                                <td>${cimsession.deviceId! }</td>
                                <td>${cimsession.deviceName! }</td>
                                <td>${cimsession.appVersion! }</td>
                                <td>${cimsession.osVersion! }</td>
                                <td>${cimsession.language! }</td>
                                <td>
                                    <@spring.messageArgs "module.console.cimsession.time.format",[((.now?long -
                                    cimsession.bindTime)/1000)?round?c] />
                                </td>
                                <td>
                                    <div class="btn-group btn-group-xs">
                                        <button type="button" class="btn btn-primary" style="padding: 5px;"
                                                onclick="showMessageDialog('${cimsession.uid!}')">
                                            <span class="glyphicon glyphicon-send" style="top:2px;"></span>
                                            <@spring.message 'module.console.cimsession.send.message'/>
                                        </button>
                                        <button type="button" class="btn btn-success"
                                                style="padding: 5px;margin-left: 6px;"
                                                onclick="doShowDialogAndCallVideo('${cimsession.uid!}')">
                                            <span class="glyphicon glyphicon-facetime-video" style="top:2px;"></span>
                                            <@spring.message 'module.console.cimsession.video.message'/>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </#list>
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
        <div class="modal fade" id="messageDialog" tabindex="-1" role="dialog">
            <div class="modal-dialog" style="width: 420px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title"><@spring.message 'module.console.cimsession.send.message'/></h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-groupBuy">
                            <label for="Amobile">
                                <@spring.message 'module.console.cimsession.receiver'/>
                            </label>
                            <input type="text" class="form-control" id="Saccount" name="account"
                                   style="width: 100%; font-size: 20px; font-weight: bold;height:40px;"
                                   disabled="disabled"/>
                        </div>
                        <div class="form-groupBuy" style="margin-top: 20px;">
                            <label for="exampleInputFile">
                                <@spring.message 'module.console.cimsession.message'/>
                            </label>
                            <textarea rows="10" style="width: 100%; height: 200px;" id="message" name="message"
                                      class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer" style="padding: 5px 10px; text-align: center;">
                        <button type="button" class="btn btn-success btn-lg" style="width: 200px;"
                                onclick="doSendMessage()">
                            <span class="glyphicon glyphicon-send" style="top:2px;"></span><@spring.message
                            'module.common.send'/>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $('#sessionMenu').addClass('current');
        </script>

        <div class="modal fade" id="videoDialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
            <div class="modal-dialog" style="width: 640px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                onclick="doHangup()"><span aria-hidden="true">&times;</span></button>
                        <h4 id="videoTargetId" class="modal-title"></h4>
                    </div>
                    <div class="modal-body" style="padding: 0; height: 480px">
                        <video id="remoteVideo" playsinline autoplay></video>
                        <video id="localVideo" playsinline autoplay muted></video>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>
